<template>
	<view>
		<page-header :team-id="teamId">
			<view class="white">
				<uni-search-bar cancelButton="none" @input="handleSearch" :placeholder="$t('module.enter-module-name')"></uni-search-bar>
			</view>
		</page-header>
		<page-body
			class="page-body"
			@scrolltolower="handleLowerRefresher"
			@scrolltoupper="handleToupperRefresher"
			@refresherrefresh="handlePullRefresher"
			:refresher-enabled="refresherEnabled"
			:refresher-triggered="refresherTriggered"
			:safe-bottom="!isRoot"
		>
			<template v-slot:header>
					<uni-collapse ref="collapse" :accordion="false" v-model="collapseStates" @change="handleCollapseStateChange">
						<uni-collapse-item>
							<template v-slot:title>
								<uni-section :title="$t('module')" type="line" class="cat2bug-section-header"></uni-section>
							</template>
							<view class="white col parent-module">
								<uni-forms :label-width="90">
									<uni-forms-item :label="$t('module.name')" name="moduleName">
										<text>{{ currentModule.moduleName }}</text>
									</uni-forms-item>
									<uni-forms-item :label="$t('module.level-path')" name="parentPath">
										<view class="row module-path">
											<text
												class="module-path-item"
												v-for="(pm,pmIndex) in parentModuleList"
												:key="pmIndex"
												@click="handleClickModulePath(pm)">{{ moduleName(pm.moduleName) }}</text>
										</view>
									</uni-forms-item>
									<uni-forms-item :label="$t('annexList')" name="annexUrls" v-if="this.parentModuleList.length>1">
										<view class="col">
											<file-link
												class="annex-link"
												v-for="(file, fileIndex) in annexUrls(currentModule)" 
												:key="fileIndex"
												v-model="annexUrls(currentModule)[fileIndex]"></file-link>
										</view>
									</uni-forms-item>
									<uni-forms-item :label="$t('remark')" name="remark" v-if="this.parentModuleList.length>1">
										<text>{{ currentModule.remark || '' }}</text>
									</uni-forms-item>
								</uni-forms>
							</view>
						</uni-collapse-item>
					</uni-collapse>
					<uni-section :title="$t('module.sublist')" type="line" class="cat2bug-section-header"></uni-section>
			</template>
			<template v-slot:content>
				<uni-list>
					<uni-swipe-action>
						<uni-swipe-action-item
							v-for="(module, moduleIndex) in moduleList"
							:key="moduleIndex"
							show="none"
							:auto-close="true">
							<template v-slot:right>
								<module-tools 
									proxy-module-tools-id="fab"
									v-model="moduleList[moduleIndex]" 
									@create="refreshList"
									@delete="refreshList"></module-tools>
							</template>
							<uni-list-item 
								:showArrow="!isLeaf(module)" 
								clickable 
								@click="handleClickModule(module)">
								<template v-slot:body>
									<view class="col">
										<text>{{ module.moduleName }}</text>
										<view class="col annex-list">
											<file-link
												class="annex-link"
												v-for="(file, fileIndex) in annexUrls(module)" 
												:key="fileIndex"
												v-model="annexUrls(module)[fileIndex]"></file-link>
										</view>
									</view>
								</template>
							</uni-list-item>
						</uni-swipe-action-item>
					</uni-swipe-action>
				</uni-list>
				<uni-load-more :status="loadStatus" @clickLoadMore="handleLowerRefresher()" />
			</template>
		</page-body>
		<module-tools 
			module-tools-id="fab"
			show-type="fab" 
			v-model="currentModule" 
			@create="refreshList"
			@modify="handleModuleChange"
			@delete="handleBackParentModulePath"
			@back="handleBackParentModulePath"></module-tools>
	</view>
</template>

<script>
	import { getFileName, getExtensionName } from "@/utils/file";
	import { listModule, delModule, addModule, updateModule } from "@/api/system/module.js"
	import { updateConfig } from '@/api/system/user.js'
	import {checkPermi} from "@/utils/permission";
	import config from '@/config'
	import FileLink from "@/components/file-link/index.vue"
	import ModuleTools from '@/subpackage/components/module/module-tools/index.vue'
	
	/** 保存到本地缓存缺陷详情折叠面板状态的Key */
	const MODULE_COLLAPSE_STATE_KEY = 'module-collapse-state';
	
	export default {
		name: 'Module',
		components: { FileLink, ModuleTools },
		data() {
			return {
				// 是否显示折叠面板的状态开关
				collapseStates: ['0'],
				// 交付物列表
				moduleList: [],
				// 父级交付物列表
				parentModuleList: [{
					moduleId: 0,
					moduleName: '根',
					annexUrls: null
				}],
				// 交付物查询参数
				queryParams: {
					modulePid: 0,
					moduleName: null,
					pageNum: 1,
					pageSize: 10
				},
				// 项目列表总数量
				total: 0,
				// 显示的加载状态
				loadStatus: 'more',
				// 是否可以下拉列表
				refresherEnabled: true,
				// 列表是否在下拉刷新状态
				refresherTriggered: false,
			}
		},
		computed: {
			/** 是否加载完成  */
			loaded() {
				return (this.$i18n && this.$i18n.locale)?true:false;
			},
			/** 获取项目id操作 */
			projectId() {
				return parseInt(this.$store.state.user.config.currentProjectId);
			},
			/** 交付物描述 */
			moduleIntroduce: function() {
				return function (module) {
					return module.annexUrls||'';
				}
			},
			/** 是否是根节点 */
			isRoot: function() {
				return this.parentModuleList.length===1;
			},
			/** 是否是叶子节点 */
			isLeaf: function() {
				return function (module) {
					return !module.childrenCount;
				}
			},
			/** 交付物附件集合 */
			annexUrls: function() {
				return function (module) {
					const files = module.annexUrls?module.annexUrls.split(","):[];
					return files.filter(path=>path).map(path=>{
						const fileName = getFileName(path);
						const fileExtension = getExtensionName(path);
						return {
							fileName: path,
							newFileName: fileName,
							fileExtension: fileExtension,
							path: config.baseUrl + path,
							upload_percent: 100
						}
					});
				}
			},
			/** 当前交付物 */
			currentModule: function() {
				return this.parentModuleList[this.parentModuleList.length-1];
			},
			moduleName: function() {
				return function(moduleName) {
					return moduleName.length>10?moduleName.substring(0, 10)+'...':moduleName;
				}
			}
		},
		onLoad(option) {
			if(option.moduleId) {
				this.parentModuleList.splice(this.parentModuleList.length, 1, option);
			}
			this.getModuleList(option.moduleId);
		},
		methods: {
			/** 搜索交付物列表 */
			handleSearch(e) {
				this.queryParams.moduleName = e;
				this.refreshList();
			},
			/** 重置查询条件 */
			reset() {
				this.refresherTriggered = true;
				this.loadStatus = 'more';
				this.moduleList = [];
				this.queryParams.pageNum = 1;
			},
			/** 刷新交付物列表 */
			refreshList() {
				this.getModuleList(this.currentModule.moduleId);
			},
			/** 查询交付物列表 */
			getModuleList(parentModuleId) {
				this.loadStatus = 'loading';
				if(parentModuleId) {
					this.queryParams.modulePid = parentModuleId;
				} else {
					this.queryParams.modulePid = 0;
				}
				this.queryParams.projectId = this.projectId;
				listModule(this.queryParams).then(response => {
					this.refresherTriggered = false;
					this.moduleList = response.data;
					// this.total = response.total;
					if(this.total > this.moduleList.length) {
						this.loadStatus = 'more';
						this.queryParams.pageNum += 1;
					} else {
						this.loadStatus = 'no-more';
					}
					this.$refs.collapse.resize();
				});
			},
			/** 处理滚动到最底端刷新事件 */
			handleLowerRefresher() {
				if(this.loadStatus === 'more') {
					this.getModuleList();
				}
				// this.refresherEnabled = false;
			},
			handleToupperRefresher() {
				// this.refresherEnabled = true;
			},
			/** 处理下拉刷新事件 */
			handlePullRefresher() {
				this.reset();
				this.getModuleList(this.queryParams.modulePid);
			},
			/** 处理点击项目事件 */
			handleClickModule(module) {
				this.parentModuleList.splice(this.parentModuleList.length, 1, module);
				this.getModuleList(module.moduleId);
			},
			/** 处理点击交付物路径事件 */
			handleClickModulePath(module) {
				let moduleList = [];
				for(const m of this.parentModuleList) {
					moduleList.push(m);
					if(m.moduleId === module.moduleId) {
						break;
					}
				}
				this.parentModuleList = moduleList;
				this.getModuleList(moduleList[moduleList.length-1].moduleId);
				this.$refs.collapse.resize();
			},
			/** 处理返回父交付物路径事件 */
			handleBackParentModulePath() {
				if(this.currentModule.moduleId && this.parentModuleList.length>1) {
					const parentModule = this.parentModuleList[this.parentModuleList.length-2];
					this.handleClickModulePath(parentModule);
				} else {
					uni.navigateBack();
				}
			},
			/** 处理动态面板状态改变 */
			handleCollapseStateChange() {
				const self = this;
				this.$nextTick(()=>{
					uni.setStorage({
						key: MODULE_COLLAPSE_STATE_KEY,
						data: self.collapseStates,
						success: function (res) {
							uni.getStorage({
								key: MODULE_COLLAPSE_STATE_KEY,
								success: function (res) {
								}
							});
						}
					});
				});
			},
			/** 处理交付物改变 */
			handleModuleChange(module) {
				if(this.parentModuleList.length==0) return;
				if(this.currentModule.moduleId===module.moduleId) {
					this.$set(this.parentModuleList, this.parentModuleList.length-1, module);
				}
			}
		}
	}
</script>
<style>
	.popup {
	  position: fixed;
	  left: 0;
	  right: 0;
	  bottom: 0;
	  z-index: 9999;
	}
	
	.popup-content {
	  background: #fff;
	  padding: 20rpx;
	  border-radius: 16rpx 16rpx 0 0;
	  min-height: 300rpx;
	
	  /* 底部弹出动画 */
	  transform: translateY(100%);
	  transition: transform .25s ease-out;
	}
	
	.uni-popup__show .popup-content {
	  transform: translateY(0);
	}
</style>
<style lang="scss" scoped>
	.parent-module {
		margin-bottom: 10rpx;
		padding: 0rpx 30rpx 15rpx 30rpx !important;
	}
	.parent-module, .children-module {
		padding: 15rpx 30rpx 15rpx 30rpx;
		align-items: flex-start;
	}
	.block {
	  flex-shrink: 0;
	  border-radius: 8rpx;
	  margin: 10rpx 0 0 0;
	  width: 6rpx;
	  height: 25rpx;
	  background-color: $uni-color-primary;
	}
	.annex-list {
		gap: 0;
	}
	.annex-link {
		font-size: 0.8rem;
		::v-deep .file-item {
			margin-bottom: 0;
		}
	}
	.module-path {
		flex-wrap: wrap;
	}
	.module-path-item {
		color: $uni-color-primary;
	}
	.module-path-item:before {
		content: '/';
		padding-left: 10rpx;
		padding-right: 20rpx;
		color: $uni-text-color;
	}
	.white {
		background-color: white;
		width: 100%;
	}
	::v-deep .uni-forms-item__content {
		display: flex;
		align-items: center;
	}
	::v-deep .uni-forms-item {
		margin-bottom: 10rpx;
	}
</style>